<!--日志管理-->
<template>
  <div class="addInformation">
    <div class="opNoticeTop">
      <div>
        <img src="/static/img/返回.png" @click="backClick">
        <span>{{titleVal}}</span>
      </div>
    </div>
    <div class="opNoticeMain">
      <div class="searchLogList">
        <div class="searchLogListLi">
          <div :class="{'signManageSearchRightSearch':true,'signManageSearchRightSearchSelect':issignManageSearchRightSearchSelect == '2'}"
            @click="searchFindClick(1)">已激活</div>
          <div :class="{'signManageSearchRightSearch':true,'signManageSearchRightSearchSelect':issignManageSearchRightSearchSelect == '1'}"
            @click="searchFindClick(2)">未激活</div>
          <div v-show="issignManageSearchRightSearchSelect == '2'">当前仍有{{dataList.length}}人未激活，请确认员工手机号是否正确</div>
        </div>
        <div class="searchLogListLiRight">
          <div :class="{'signManageSearchRightSearchR':true}" v-show="issignManageSearchRightSearchSelect == '2'" @click="sendClick">全部发送激活短信</div>
        </div>
      </div>
      <div class="listLoglistMain">
        <statisticsActiveACTIVEList v-show="issignManageSearchRightSearchSelect == '1'" :dataLists="dataList"></statisticsActiveACTIVEList>
        <statisticsActiveINACTIVEList @click="updateclick" v-show="issignManageSearchRightSearchSelect == '2'" :dataLists="dataList"></statisticsActiveINACTIVEList>
      </div>
      <div class="lastLi" v-show="dataList.length > 0">
        <div>
        </div>
        <div>
          <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40]" :page-size="pageSizeNum"
            :current-page="currentPage" layout="total, sizes, prev, pager, next" :total="totalNum">
          </el-pagination> -->
          <!-- <el-pagination @current-change="handleCurrentChange" small layout="prev, pager, next" :total="totalNum">
          </el-pagination> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions } from "vuex";
import statisticsActiveINACTIVEList from "../../cModel/statisticsActiveINACTIVEList.vue";
import statisticsActiveACTIVEList from "../../cModel/statisticsActiveACTIVEList.vue";
export default {
  components: {
    statisticsActiveACTIVEList,
    statisticsActiveINACTIVEList
  },
  data() {
    return {
      issignManageSearchRightSearchSelect: 1,
      pageSizeNum: 10,
      currentPage: 1,
      totalNum: 0,
      memberIdListArrLength: 0,
      dataList: [], // 日志数据
      titleVal: "激活情况统计"
    };
  },
  created: function() {
    let accessToken = sessionStorage.getItem("accessToken");
    if (accessToken) {
      this.listsFun();
    } else {
      this.$router.push({
        path: "/login"
      });
    }
  },
  mounted() {},
  methods: {
    updateclick(index) {
      this.listsFun();
    },
    // 发送验证
    sendClick(index) {
      let self = this;
      let memberIdListArr = [];
      self.dataList.forEach(function(params) {
        if (params.sendSmsFlog != 1) {
          memberIdListArr.push(params.memberId);
        }
      });
      let lisObj = {
        companyName: sessionStorage.getItem("ORGName"),
        memberIdList: memberIdListArr
      };
      self
        .apiapiOrgorgsendactivitysms(JSON.stringify(lisObj))
        .then(data => {
          if (data.statusCode == 200) {
            self.$message({
              type: "success",
              message: "发送成功"
            });
            this.listsFun();
          } else {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
          }
        })
        .catch(msg => {
          self.$message({
            type: "info",
            message: "服务器异常"
          });
        });
    },
    // 返回
    backClick() {
      let self = this;
      self.$router.push({
        path: "/home/business/statistics"
      });
    },
    // 查询
    searchFindClick(index) {
      let self = this;
      self.dataList = [];
      self.selectAllShow = false;
      self.issignManageSearchRightSearchSelect = index;
      let lisObj = {
        companyId: sessionStorage.getItem("ORGID")
      };
      if (index == 1) {
        lisObj["activeStatus"] = "ACTIVE";
      } else {
        lisObj["activeStatus"] = "INACTIVE";
      }
      self
        .getapiorgmembers(JSON.stringify(lisObj))
        .then(data => {
          if (data.statusCode == 200) {
            if (data.data) {
              self.dataList = data.data;
            } else {
              self.dataList = [];
            }
          } else {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
          }
        })
        .catch(msg => {
          self.$message({
            type: "info",
            message: "服务器异常"
          });
        });
    },
    // 初始化数据
    listsFun() {
      let self = this;
      self.dataList = [];
      self.tselectAllShow = false;
      let activeStatusStr = "ACTIVE";
      if (self.$route.query.IN == "IN") {
        activeStatusStr = "INACTIVE";
        self.issignManageSearchRightSearchSelect = 2;
      } else {
        activeStatusStr = "ACTIVE";
        self.issignManageSearchRightSearchSelect = 1;
      }
      let lisObj = {
        companyId: sessionStorage.getItem("ORGID"),
        activeStatus: activeStatusStr
      };
      self
        .getapiorgmembers(JSON.stringify(lisObj))
        .then(data => {
          if (data.statusCode == 200) {
            if (data.data) {
              self.dataList = data.data;
            } else {
              self.dataList = [];
            }
          } else {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
          }
        })
        .catch(msg => {
          self.$message({
            type: "info",
            message: "服务器异常"
          });
        });
    },
    //分页-当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.searchFindClick();
      // this.listsFun();
    },
    // 分页-每页条数
    handleSizeChange(val) {
      this.pageSizeNum = val;
      this.searchFindClick();
    },
    ...mapActions([
      "getapiorgmembers",
      "getweblogmanagedelete",
      "getweblogsearchexport",
      "apiapiOrgorgsendactivitysms"
    ])
  },
  filters: {
    activeFun(val) {
      if (val == "ACTIVE") {
        return "已激活";
      } else if (val == "INACTIVE") {
        return "未激活";
      } else {
        return "暂无";
      }
    },
    timeFun(val) {
      if (val) {
        let standardTime = new Date(val * 1);
        let y, m, d, h, f, s;
        y = standardTime.getFullYear();
        m = standardTime.getMonth() + 1;
        m = m > 9 ? m : "0" + m;
        d = standardTime.getDate();
        d = d > 9 ? d : "0" + d;
        h = standardTime.getHours();
        h = h > 9 ? h : "0" + h;
        f = standardTime.getMinutes();
        f = f > 9 ? f : "0" + f;
        s = standardTime.getSeconds();
        s = s > 9 ? s : "0" + s;
        return y + "-" + m + "-" + d + " " + h + ":" + f + ":" + s;
      } else {
        return "暂无";
      }
    },
    typeFun: function(val) {
      if (val == 1) {
        return "部门";
      } else {
        return "人员";
      }
    },
    strFun: function(val) {
      if (val) {
        return val;
      } else {
        return "暂无";
      }
    },
    weekFun(val) {
      if (val == 7) {
        return "日";
      } else if (val == 1) {
        return "一";
      } else if (val == 2) {
        return "二";
      } else if (val == 3) {
        return "三";
      } else if (val == 4) {
        return "四";
      } else if (val == 5) {
        return "五";
      } else if (val == 6) {
        return "六";
      }
    }
  },
  watch: {}
};
</script>
<style scoped>
.firstLi {
  background-color: #f4f4f6;
}

.firstLi,
.dataLi {
  display: flex;
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #ccc;
}

.firstLi > div,
.dataLi > div {
  width: 20%;
  text-align: center;
  height: 50px;
  line-height: 50px;
}

.lastLi {
  height: 60px;
  display: flex;
  justify-content: space-between;
  margin: 35px 0;
}

.signManageSearchRightSearchSelect {
  color: #288df0 !important;
  background-color: #fff !important;
  border: 1px solid #288df0 !important;
}

.signManageSearchRightSearchR {
  width: 150px;
  height: 34px;
  cursor: pointer;
  border-radius: 3px;
  background-color: #288df0;
  text-align: center;
  line-height: 34px;
  color: #fff;
  margin-right: 15px;
}

.signManageSearchRightSearch {
  width: 70px;
  height: 34px;
  cursor: pointer;
  border-radius: 3px;
  background-color: #288df0;
  text-align: center;
  line-height: 34px;
  color: #fff;
  margin-right: 15px;
}

.listLoglistMainOPent {
  width: 100%;
  height: 35px;
  display: flex;
  justify-content: flex-end;
}

.searchLogListLiRightSelect select {
  width: 150px;
  height: 30px;
  border: 1px solid #38adff;
  border-radius: 3px;
  line-height: 30px;
  padding-left: 7px;
}

.searchLogListLiRightSelect {
  width: 180px;
  height: 30px;
  border-radius: 3px;
  line-height: 30px;
}

.searchLogListLiRightPeo {
  width: 250px;
  height: 30px;
  border: 1px solid #38adff;
  border-radius: 3px;
  line-height: 30px;
  padding-left: 7px;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.searchLogListLiRightTime > div:nth-child(2) {
  margin-left: 10px;
}

.searchLogListLiRightTime {
  display: flex;
}

.searchLogListLiLeft {
  width: 80px;
  text-align: right;
  margin-right: 15px;
}

.searchLogListLiRight {
  display: flex;
  width: 175px;
  height: 35px;
  float: right;
  align-items: center;
  margin-bottom: 10px;
  margin-top: 10px;
}

.searchLogListLi {
  display: flex;
  width: 65%;
  height: 35px;
  float: left;
  align-items: center;
  margin-bottom: 10px;
  margin-top: 10px;
}

.searchLogList {
  margin-top: 30px;
  height: 75px;
  width: 100%;
}

.listLoglistMain {
  margin-top: 10px;
  min-height: 190px;
  width: 100%;
  border: 1px solid #ccc;
}

.addInformation {
  overflow: hidden;
  width: 100%;
  background-color: #fff;
  min-height: 500px;
  padding-bottom: 20px;
}

.opNoticeTop div {
  color: #303030;
  font-size: 14px;
  padding-top: 24px;
  padding-bottom: 12px;
  margin-left: 44px;
  width: calc(100% - 88px);
  border-bottom: 1px solid #d9d9d9;
  /* height:  */
  position: relative;
}

.opNoticeTop div span {
  margin-left: 28px;
}

.opNoticeTop div img {
  position: absolute;
  top: 24px;
  cursor: pointer;
}

.opNoticeTop {
  width: 100%;
}

.opNoticeMain {
  margin-left: 44px;
  width: calc(100% - 88px);
  min-height: 400px;
}
</style>